<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		/* 在媒体查询 4 级规范可以这样写，效果等同于 */
		/* @media (min-width: 768px) {} */
		/* @media (min-width: 1200px) {} */
		@media (width >=768px) {
			.container {
				width: 600px;
				height: 300px;
				background-color: salmon;
				font-size: 22px;
			}
		}

		@media (width >=1200px) {
			.container {
				width: 1000px;
				height: 500px;
				background-color: gold;
				font-size: 28px;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		不同设备下的宽高字号都是有区别的
	</div>
</body>

</html>